import Base from '@/components/Base';
import { Button, Card, Slider, Row, Col, Typography, Divider } from 'antd';
import { KayButton } from '@/components/KayUI';
import webGlControl from './control';
import styles from './index.less';

const { Title, Paragraph, Text } = Typography;

interface State {}

export default class Index extends Base<any, State> {
  public state: State = {};

  public async didShow() {}

  public async didMount() {
    // console.log('history', this.navigator.history)
    webGlControl.init('three-math-container');
  }

  public willUnmount() {
    webGlControl.destroy();
  }

  public render() {
    const {} = this.state;
    return (
      <Card title="">
        <Divider />

        <Typography>
          <Title level={3}>开始</Title>
          <Paragraph>
            <Text>1、Vector3 相关方法</Text>
          </Paragraph>
          <Paragraph>
            <p>
              <Text code>cb.subVectors( A, B );</Text>
              subVectors: 将该向量设置为A - B。
            </p>
            <p>
              <Text code>cb.cross( v );</Text>
              cross: 该向量设置为它本身与传入的v的叉积
            </p>
            <p>
              <Text code>cb.normalize();</Text>
              将该向量转换为单位向量(方向相同，长度设为1)
            </p>
          </Paragraph>
          <Paragraph>
            <a href="http://www.yanhuangxueyuan.com/doc/Three.js/MatrixRST.html">
              http://www.yanhuangxueyuan.com/doc/Three.js/MatrixRST.html
            </a>
          </Paragraph>
          <Paragraph>
            <p>
              <Text code>Quaternion</Text>
              4元数，在three中表示旋转
            </p>
          </Paragraph>
        </Typography>

        <div
          id="three-math-container"
          style={{ width: '600px', height: '600px', position: 'relative' }}
        />
      </Card>
    );
  }
}
